export default {
    mounted(el) {
        const input = el.tagName === 'INPUT' ? el : el.querySelector('input')
        if (!input) {
            return;
        }

        const handler = () => {
            const original = input.value
            const upper = original.toUpperCase()
            if (original !== upper) {
                input.value = upper
                input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}))
            }
        }

        input.addEventListener("change", handler)
        el._uppercaseHandler = handler
    },
    unmounted(el) {
        const input = el.tagName === 'INPUT' ? el : el.querySelector('input')
        if (!input || !el._uppercaseHandler) {
            return;
        }
        input.removeEventListener("change", el._uppercaseHandler)
        delete el._uppercaseHandler
    }
}